<template>
    <div class="orderDetail">
        <!-- 订单地址 -->
        <!-- <div class="order-site-boxs">
            <div class="order-site-box" v-if="addressForm">
                <div class="order-site-info">
                    <div class="order-site-address">{{addressForm.addrDetail}}</div>
                    <div class="order-site-info-name">{{addressForm.addrName}}</div>
                    <div class="order-site-info-phone">{{addressForm.addrMobile}}</div>
                </div>
                <div class="site-icon" @click="gotoAddress">
                    <van-icon name="arrow" class="icon" />
                </div>
            </div>
            <div class="order-site-box" v-else @click="gotoAddress">
                <div class="order-site-info" >
                    <div class="not-site">请填写收货地址</div>
                </div>
                <div class="site-icon">
                    <van-icon name="arrow" class="icon" />
                </div>
            </div>
        </div> -->
        <!-- 订单地址 -->
        <div class="boxs">
        <!-- 商品列表 -->
            <div class="box">
                <van-image class="product-img" :src="$store.state.imageHost+goodsForm.goodsImages[0].url"></van-image>
                <div class="right">
                    <div class="title">{{goodsForm.goodsName}}</div>
                    <div class="price-num">
                        <div class="price">${{goodsForm.goodsPrice}}</div>
                        <!-- <div class="num"> ×2</div> -->
                    </div>
                    <div class="number">
                        <van-stepper :disabled="goodsForm.goodsType==2?false:true" :value="goodsNum" min="1" max="10" @change="onChange"/>
                    </div>
                    <!-- <div class="number">数量:{{goodsNum}}包</div> -->
                    <!-- <div class="">支付金额:${{totalAmount}}</div> -->
                </div>
            </div>
            <!-- 商品列表 --> 
        </div>
        
        <div class="product-detail">
            <div class="cell-line">
                <div class="label">{{  $i18n.t('default.home.totalAmount') }}</div>
                <div class="value amount">
                    <div class="amount">${{ totalAmout }}</div>
                </div>
            </div>
            <!-- <div class="cell-line">
                <div class="label">Преференциальная сумма</div>
                <div class="value price">
                    <div>{{ 0 }}</div>
                </div>
            </div> -->
            <div class="cell-line">
                <div class="label">{{  $i18n.t('default.home.integralBalance') }}({{$store.state.userInfo.userBalance}})</div>
            </div>
        </div>
        <div style="height: 2rem;"></div>
        <div class="fixed-bottom">
            <van-button 
                 size="large" 
                class="btn1 btn home-button" 
                @click="gotoSuccess(1)"
            >{{  $i18n.t('default.home.submitOrder') }} ${{ totalAmout }}</van-button>
        </div>
        <!-- <div class="fixed-bottom2">
            <van-button 
                size="large" 
                class="btn2 btn primary2 home-button" 
                @click="gotoSuccess(2)"
            >Представление заказов ${{ totalAmount }}</van-button>
        </div> -->
    </div>
</template>

<script>

export default {
  data() {
    return {
        isSite: false,
        goodsForm: {
            createTime:  0,
            goodsBanner: "",
            goodsID: 0,
            goodsImage: "",
            goodsImages: [],
            goodsIntro: "",
            goodsName: "",
            goodsPrice: null,
            goodsPriceMember: null,
            goodsState: 1,
        },
        addressForm:null,
        isSite: false,
        goodsNum: 1,
        stepNum: 1,
        totalAmount: 0,
        totalAmout: '',
    }
  },

  created() {
    // this.goodsForm =  this.$store.state.productDetail;
    // console.log('orderDetail.vue: ',this.goodsForm)
    this.goodsNum = this.$route.query.goodsNum?this.$route.query.goodsNum:1;
    this.init2();
  },

  mounted() {
    // if(this.$store.state.addressForm){
    //     this.addressForm = this.$store.state.addressForm;
    // } else {
    //     this.init();
    // }
    // this.init2();
  },
  methods: {
    onChange(event) {
        console.log(event);
        this.goodsNum = event;
        // if(this.$store.state.userInfo&&this.$store.state.userInfo.ordersDoneNum > 0){
        //     this.totalAmount = event * this.goodsForm.goodsPriceMember;
        // } else {
        //     this.totalAmount = event * this.goodsForm.goodsPrice;
        // }
        this.totalAmount = event * this.goodsForm.goodsPrice;
    },
    init(){
        this.$api.get(this.$url.address.avail).then(res=>{
            if(res.code == 'SUCCESS'){
                if(res.data.length > 0){
                    for(let i in res.data){
                        if(res.data[i].addrInUse == 1){
                            this.isSite = true;
                            this.addressForm = res.data[i];
                        }else{
                            this.isSite = false;
                        }
                    }
                }
                if(!this.isSite){
                    this.addressForm = res.data[0];
                }
                
                
            }else{
                
            }
        })
    },
    init2(){
        this.goodsForm.goodsID =  this.$route.query.goodsID?this.$route.query.goodsID:this.$store.state.goodsID;
        if(this.$route.query.goodsID){
            this.goodsForm = JSON.parse(this.$route.query.goodsItem);
        }
        this.totalAmout = this.goodsForm.goodsPrice;
        this.totalAmout= this.totalAmout * this.goodsNum;
        console.log('...this.goodsForm: ',this.goodsForm,this.totalAmout,this.goodsNum)
        
        // this.$api.get('/goods/info/'+this.goodsForm.goodsID).then(res=>{
        //   console.log('home...res:',res)
        //   if(res.code == 'SUCCESS'){
        //     this.goodsForm = res.data;
        //     if(this.$store.state.userInfo&&this.$store.state.userInfo.ordersDoneNum > 0){
        //         this.totalAmount = this.goodsForm.goodsPriceMember * this.goodsNum;
        //     } else {
        //         this.totalAmount = this.goodsForm.goodsPrice * this.goodsNum;
        //     }
        //     if(this.goodsForm){
        //         if(typeof this.goodsForm.goodsImages == 'string'){
        //             this.goodsForm.goodsImages = this.goodsForm.goodsImages.split(',');
        //         }
        //     }
        //   }
        // })
    },
    gotoSuccess(index){
        // if(this.addressForm == null){
        //     this.$toast('请选择收货地址');
        //     return;
        // }
        this.$api.get(this.$url.orders.saved).then(res=>{
          if(res.code == 'SUCCESS' && res.data > 0){
            this.$dialog.confirm({
                message: this.$i18n.t('default.home.orderTip') ,
                confirmButtonText:this.$i18n.t('default.home.continueOrder'),
                showCancelButton:true,
                cancelButtonText:this.$i18n.t('default.home.viewOrder'),
                confirmButtonColor:'#bf1c16',
            }).then((res)=>{
                if(res){
                    this.getOrders(index);
                }
            }).catch((res) => {
                // on cancel
                this.$router.push({path: '/order'})
            });
          } else {
            this.getOrders(index);
          }
        })
        // 20250422.........update time
    },
    getOrders(index){
        console.log('.1111')
        this.$api.post(this.$url.orders.orders,{
            goodsID: this.goodsForm.goodsID,
            ordersNum: this.goodsNum,
            // addrID: this.addressForm.addrID,
            // ordersPayType: index
        }).then(res=>{
            if(res.code == 'SUCCESS'){
                this.$store.commit('setGoodsID',null);
                this.$store.commit('setAddressForm',null);
                this.$router.push({path: '/orderSuccess',query:{ordersID: res.data}})
            }
        })
    },
    gotoAddress(){
        this.$router.push({path: '/address'})
    }
  }
}

</script>

<style scoped lang="scss">
@import "@/assets/css/variable.scss";
.orderDetail{
    background: #fff;
}
.order-site-boxs{
    padding: .3rem;
}
.order-site-box{
    height: 2.4rem;
    border-radius: 10px; 
    padding: .3rem;
    border: 1px solid #D6D7DC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .not-site{
        font-size: .32rem;
    }
}
.order-site-info{
    .order-site-address{
        font-weight: bold;
    }
    .order-site-info-name{
        margin-top: .32rem;
    }
    .order-site-info-phone{
        margin-top: .1rem;
    }
}
.site-icon{
    font-size: .48rem;
}

.boxs{
    padding: .5rem .3rem;
}
.box{
    display: flex;
    height: 2.8rem;
    background: #fff;
    // border: 1px solid #D6D7DC;
    border-radius: 10px;
    padding: .3rem;
    margin-bottom: .2rem;
    .number{
        margin-top: .18rem;
    }
    .product-img{
        width: 2.2rem;
        height: 2.2rem;
        border-radius: .1rem;
        margin-right: .3rem;
    }
    .price-num{
        display:flex;
        align-items: flex-end;
        font-size: 0.48rem;
    }
    .price{
        margin-top: .18rem;
        margin-right: .1rem;
        font-size: 0.48rem;
    }
}
.product-detail{
    margin-top: .2rem;
    .cell-line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .3rem;
        .label{
            font-size: .32rem;
            color: #323232;
        }
        .value{
            font-size: .32rem;
            color: #323232;
        }
        .amount{
            font-size: 0.36rem;
        }
    }
}
.hint{
    color: $money;
    text-align: center;
}
.fixed-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    .btn{
        height: 1rem;
        border-radius: 0;
        font-size: .36rem;
    }
}
.fixed-bottom2{
    position: fixed;
    bottom: 1rem;
    left: 0;
    width: 100%;
    height: 1rem;
    .btn2{
        height: 1rem;
        border-radius: 0;
        font-size: .36rem;
    }
}
</style>

<style>
.orderDetail .product-img img{
    width: 2.2rem;
    height: 2.2rem;
}
</style>